<%+cbi/valueheader%>
<script src="https://cdn.jsdelivr.net/npm/qrcode_js@1.0.0/qrcode.min.js"></script>
<style>
    #qrcontainer {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 5000;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, .8);
        text-align: center;
        transition: all 0.3s;
    }
    #qrcontainer.hidden{
        opacity: 0;
        visibility: hidden;
    }

    #qrcontainer .qframe {
        background-color: #ffffff;
        padding: 1rem;
        border-radius: 0.5rem;
        border: #6D8A88 1px solid;
        -webkit-box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 7px 3px rgba(0, 0, 0, 0.2);
        position: relative;
    }
    #qrcontainer .qframe #refresh_qrcode{
        width: 256px;
        height: 256px;
        position: absolute;
        background-color: rgba(0, 0, 0, 0.5);
        left: 1rem;
        top: 1rem;
        color: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #qrcontainer .qframe #refresh_qrcode.hidden{
        opacity: 0;
        visibility: hidden;
    }
    #qrcontainer .qframe #refresh_qrcode h3{
        font-weight: normal;
    }
    #qrcontainer .qframe #refresh_qrcode .refresh{
        display: block;
        background: #e4393c;
        width: 80px;
        height: 30px;
        margin: 0 auto;
        line-height: 30px;
        opacity: 1;
        z-index: 19;
        color: #fbfbfb;
        text-decoration: none;
        cursor: pointer;
    }
    #qrcontainer .qframe .info {
        padding: 1rem 0 0 0;
    }
</style>

<label class="cbi-value-title"><%= translate("获取Cookie") %></label>
<div class="cbi-value-field">
    <input type="button" data-rel="1" class="cbi-button cbi-input-reload cookie-button" value="<%= translate('获取第一Cookie') %>" />
    <input type="button" data-rel="2" class="cbi-button cbi-input-reload cookie-button" value="<%= translate('获取第二Cookie') %>" />
    <br />
    <div class="cbi-value-description">
        <span class="cbi-value-helpicon"><img src="/luci-static/resources/cbi/help.gif" alt="帮助" /></span>
        <%= translate("点击上面按钮使用京东手机app扫码获取Cookie")%>
    </div>
</div>
<div id="qrcontainer" class="hidden">
    <div class="qframe">
        <div id="refresh_qrcode" class="hidden">
            <div>
                <h3>二维码已失效</h3>
                <div class="refresh" onclick="get_code()">刷新</div>
            </div>
        </div>
        <div id="qrcode"></div>
        <div class="info">请使用京东手机APP扫码</div>
    </div>
</div>

<script type="text/javascript">
    const QRCODE_URL = '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","qrcode")%>';
    const CHECK_LOGIN_URL = '<%=luci.dispatcher.build_url("admin", "services", "jd-dailybonus","check_login")%>';

    let ckid = 0;

    //初始化二维码
    let cookieBtn = Array.prototype.slice.call(document.getElementsByClassName("cookie-button"));
    try {
        qrcode = new QRCode(document.getElementById("qrcode"),
                {
                    text: "sample",
                    correctLevel: QRCode.CorrectLevel.L
                });
        cookieBtn.forEach(e => {
            e.onclick = () => {
                ckid = e.getAttribute("data-rel");
                get_code();
                return false;
            }
        });
    } catch (error) {
        alert("网络离线状态无法使用二维码获取Cookie，请刷新后重试！")
        cookieBtn.forEach(e => {
            e.disabled = true;
        });
    }

    //获取二维码
    function get_code(){
        XHR.get(QRCODE_URL, null, (x,d) => {
            document.getElementById("qrcontainer").classList.remove("hidden");
            document.getElementById("refresh_qrcode").classList.add("hidden");
            qrcode.clear();
            qrcode.makeCode(d.qrcode_url);
            checkLogin(d.check_url);
        });
        return false;
    }

    function checkLogin(check_url){
        let cname = ckid == 1?"cookie":"cookie2"
        XHR.poll(3, CHECK_LOGIN_URL, { check_url: check_url, id: cname }, (x, d) => {
            if (d.error == 0) {
                XHR.halt();
                XHR._q = [];
                document.getElementById("qrcontainer").classList.add("hidden");
                document.getElementById("refresh_qrcode").classList.add("hidden");
                let prefix_array = document.getElementsByClassName("cbi-input-text")[0].getAttribute("id").split(".")
                prefix_array.pop()
                let id = `${prefix_array.join(".")}.${cname}`;
                document.getElementById(id).value = d.cookie
            } else if (d.error == 21 || d.error == 261) {
                XHR.halt();
                XHR._q = [];
                document.getElementById("refresh_qrcode").classList.remove("hidden");
            }
        });
    }

</script>
<%+cbi/valuefooter%>
